<template>
    <el-card shadow="never" style="max-height: 70vh; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled/>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="头像:" prop="image">
                        <ImageUpload v-model="form.image"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医生名称:" prop="name">
                        <el-input v-model="form.name" placeholder="请输入医生名称" clearable/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医院:" prop="hiospital_id">
                        <SelectPage v-model="form.hiospital_id" placeholder="请选择所属医院"
                                    :url="'/admin/ch.hospital/selectPage'" show_field="name" show_id="id"
                                    query_field="id"
                                    :multiple="false"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="false">
                    <el-form-item label="租户:" prop="tenant_id">
                        <SelectPage v-model="form.tenant_id" :url="'/admin/ch.tenant/selectPage'"
                                    :filter="{type:{value: 2,op:'='}}"
                                    placeholder="请选择租户"
                                    show_field="name" show_id="id" query_field="id" :multiple="false"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="form.hiospital_id">
                    <el-form-item label="科室:" prop="office_id">
                        <SelectPage v-model="form.office_id" :url="'/admin/ch.hospital_office/selectPage'"
                                    :filter="{'qu_ch_hospital_office.hiospital_id':{value: form.hiospital_id,op:'='}}"
                                    placeholder="请选择科室"
                                    show_field="name" show_id="id" query_field="id" :multiple="false"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医生类别:" prop="categorys">
                        <div class="flex">
                            <SelectCategory url="/admin/ch.system_category/tree" style="flex: 1"
                                            :queryParams="{
                                                type: 3
                                            }"
                                            :check-strictly="true"
                                            :value="[cache.category1, cache.category2, cache.category3]"
                                            @change="onChangeCategory"></SelectCategory>
                            <el-button type="success" plain size="small" style="margin-left: 10px;" @click="handleAddCategory">添加</el-button>
                        </div>
                        <el-tag :key="idx" closable @close="onCloseCategory(idx)"
                                v-for="(el, idx) in form.categorys"
                                :disable-transitions="false">
                            {{el.category3_text || el.category2_text || el.category1_text}}
                        </el-tag>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态:" prop="status">
                        <el-select v-model="form.status" placeholder="请选择状态" clearable>
                            <el-option v-for="(item, index) in status" :key="index" :label="item.label"
                                       :value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序:" prop="weigh">
                        <el-input-number v-model="form.weigh" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="擅长:" prop="great_content">
                        <el-input v-model="form.great_content" placeholder="请输入擅长" clearable type="textarea" rows="4"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="简介:" prop="doctor_content">
                        <el-input v-model="form.doctor_content" placeholder="请输入简介" clearable type="textarea" rows="4"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认</el-button>
                <el-button type="warning" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
import {regionData} from 'element-china-area-data'
import SelectCategory from "@/components/My/SelectCategory";

export default {
    name: 'EditForm',
    components: { SelectCategory },
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                image: [{required: true, message: "请上传头像", trigger: "blur"}],
                name: [{required: true, message: "请输入医生名称", trigger: "blur"}],
                hiospital_id: [{required: true, message: "请选择医院", trigger: "blur"}],
                office_id: [{required: true, message: "请选择科室", trigger: "blur"}],
                status: [{required: true, message: "请选择状态", trigger: "blur"}],
                great_content: [{required: true, message: "请输入医生擅长", trigger: "blur"}],
                doctor_content: [{required: true, message: "请输入医生简介", trigger: "blur"}],
                categorys: [{required: true, message: "请选择医生分类", trigger: "blur"}],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            status: [
                {label: "启用", value: 1},
                {label: "禁用", value: 2},
            ],
            cache: {}
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }else{
                    this.form = {}
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
            this.form = {}
        },
        onChangeCategory(e, pathLabels) {
            if (e.length >= 3) this.$set(this.cache, 'category3', e[2])
            if (e.length >= 3) this.$set(this.cache, 'category3_text', pathLabels[2])
            if (e.length >= 2) this.$set(this.cache, 'category2', e[1])
            if (e.length >= 2) this.$set(this.cache, 'category2_text', pathLabels[1])
            if (e.length >= 1) this.$set(this.cache, 'category1', e[0])
            if (e.length >= 1) this.$set(this.cache, 'category1_text', pathLabels[0])
        },
        handleAddCategory() {
            if (Object.keys(this.cache).length <= 0) return this.$message.error("请选择分类")
            if (this.form.categorys) {
                let idx = this.form.categorys.findIndex(el=>{
                    return el.category1 === this.cache.category1
                        && el.category2 === this.cache.category2
                        && el.category3 === this.cache.category3
                })
                if (idx >= 0) {
                    return this.$message.error("请勿重复添加")
                }
                this.form.categorys.push(JSON.parse(JSON.stringify(this.cache)))
            }else{
                this.$set(this.form, 'categorys', [
                    JSON.parse(JSON.stringify(this.cache))
                ])
            }
            this.$set(this, 'cache', {})
        },
        onCloseCategory(idx) {
            this.form.categorys.splice(idx, 1)
        }
    }
}
</script>
